<!--
 * @Description:
 * @Author: sunye
 * @Date: 2022-02-11 17:57:07
 * @LastEditTime: 2022-02-15 10:05:41
-->
<template>
  <div class="card">
    <div class="card-decorate">
      <div class="left-dot">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="center">
        <div class="line"></div>
        <div class="shape"></div>
      </div>
      <div class="right-dot">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="card-inner">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'card'
}
</script>

<style  lang="scss">

.card{
    position: relative;
    background-position: 0 0;
    background-color: rgba(48,108,166,0.4);
    background-image: linear-gradient(to bottom, rgba(48,108,166,0.36) 0,rgba(48,108,166,0.2) 30%,rgba(48,108,166,0.01) 50%,transparent);
    background-size: cover;
    box-sizing: border-box;
    border: 1px solid #306CA6;
    .card-decorate{
      height: 4px;
      position: relative;
      margin-top: -1px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      .left-dot{
        display: flex;
        div{
          width: 4px;
          height: 4px;
          margin-right: 4px;
          &:nth-of-type(1){
            background-color: rgba(0,236,255,0.2);
          }
          &:nth-of-type(2){
            background-color: rgba(0,236,255,0.4);
          }
          &:nth-of-type(3){
            background-color: rgba(0,236,255,0.6);
          }
          &:nth-of-type(4){
            background-color: rgba(0,236,255,0.8);
          }
          &:nth-of-type(5){
            background-color: rgba(0,236,255,1);
          }
        }
      }
      .right-dot{
        display: flex;
        div{
          width: 4px;
          height: 4px;
          // background-color: #00ECFF;
          margin-right: 4px;
             &:nth-of-type(5){
            background-color: rgba(0,236,255,0.2);
          }
          &:nth-of-type(4){
            background-color: rgba(0,236,255,0.4);
          }
          &:nth-of-type(3){
            background-color: rgba(0,236,255,0.6);
          }
          &:nth-of-type(2){
            background-color: rgba(0,236,255,0.8);
          }
          &:nth-of-type(1){
            background-color: rgba(0,236,255,1);
          }
        }
      }
      .center{
        position: relative;
        width: 90px;
        margin: 0 8px;
        .line{
          width: 90px;
          height: 1px;
          background-color: #00ECFF;
          position: absolute;
          left: 50%;
          top: 0;
          transform: translateX(-50%) scaleY(0.5);
        }
        .shape{
          position: absolute;
          z-index: 9;
          left: 50%;
          top: 0;
          transform: translateX(-50%);
          width:50px;
          height:0px;
          border-width:3px 3px 0 3px;
          border-style: solid;
          border-bottom-style: none;
          border-color:transparent;
          border-top-color: #00ECFF;
        }
      }
    }
    .card-title{
      color: #00ECFF;
      text-align: center;
      height: 48px;
      line-height: 48px;
    }
    .card-inner{
      height: calc(100% - 4px );
    }
    &::before{
      content: '';
      display: inline-block;
      position: absolute;
      height: 22px;
      left: -1px;
      top: 10px;
      width:0;
      height:12px;
      border-width:3px 0 3px 3px;
      border-style: solid;
      border-right-style: none;
      border-color:transparent  ;
      border-left-color: #00ECFF;
    }
    &::after{
      content: '';
      display: inline-block;
      position: absolute;
      height: 22px;
      right: -1px;
      top: 10px;
      width:0;
      height:12px;
      border-width:3px 3px 3px 0;
      border-style: solid;
      border-left-style: none;
      border-color:transparent  ;
      border-right-color: #00ECFF;
    }
}
</style>
